var IqcReportForm = function () {
  var template = /*html*/ `
    <div class="iqc-report-form" v-loading.fullscreen.lock="loading">
    <template v-if="report!==null">
      <div class="iqc-report-btns">
        <el-form v-if="type==='add'" inline label-width="auto" size="small">
          <el-form-item label="是否需要审核">
            <el-select v-model="report.isNeedApproval" style="width:120px">
              <el-option :value="1" label="需要"></el-option>
              <el-option :value="2" label="不需要"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
        <el-form v-else-if="type==='approval'" inline label-width="auto" size="small">
          <el-form-item>
            <el-button type="primary" @click="toApproval(1)">审核</el-button>
            <el-button type="danger" @click="toApproval(2)">退回</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="iqc-report-content" :class="{'is-look':type==='look'}">
        <div class="iqc-report-content-title">来料检验报告单</div>
        <div class="iqc-report-content-table">
          <table cellspacing="0" cellpadding="0">
            <tr>
              <td style="min-width:130px">订单编号</td>
              <td style="min-width:145px">{{report.companyOrderId}}</td>
              <td style="min-width:77px">工厂型号</td>
              <td style="min-width:105px">{{report.factoryNo}}</td>
              <td style="min-width:72px">数量</td>
              <td style="min-width:70px">{{report.purchaseCount}}</td>
              <td style="min-width:65px">物料类型</td>
              <td colspan="2">{{report.materialType}}</td>
              <td style="min-width:85px">供应商</td>
              <td style="min-width:95px">{{report.providerName}}</td>
            </tr>
            <tr>
              <td rowspan="2">项目名称</td>
              <td rowspan="2">内容描述</td>
              <td colspan="3">检测类型</td>
              <td colspan="2">抽验取样标准</td>
              <td colspan="2">检验结果</td>
              <td colspan="2">备注说明</td>
            </tr>
            <tr>
              <td>
                <el-checkbox v-if="type==='add'" :value="methodAll['1']" @change="allCheckChange('methodAll','1')">全检</el-checkbox>
                <span v-else>全检</span>
              </td>
              <td>
                <el-checkbox v-if="type==='add'" :value="methodAll['2']" @click.native="allCheckChange('methodAll','2')">先抽检再全检</el-checkbox>
                <span v-else>先抽检再全检</span>
              </td>
              <td>
                <el-checkbox v-if="type==='add'" :value="methodAll['3']" @click.native="allCheckChange('methodAll','3')">抽检</el-checkbox>
                <span v-else>抽检</span>
              </td>
              <td>
                <el-checkbox v-if="type==='add'" :value="standardAll['1']" @click.native="allCheckChange('standardAll','1')">内部标准</el-checkbox>
                <span v-else>内部标准</span>
              </td>
              <td>
                <el-checkbox v-if="type==='add'" :value="standardAll['2']" @click.native="allCheckChange('standardAll','2')">AQL</el-checkbox>
                <span v-else>AQL</span>
              </td>
              <td style="min-width:63px">
                <el-checkbox v-if="type==='add'" :value="resultAll['1']" @click.native="allCheckChange('resultAll','1')">合格</el-checkbox>
                <span v-else>合格</span>
              </td>
              <td style="min-width:60px">
                <el-checkbox v-if="type==='add'" :value="resultAll['2']" @click.native="allCheckChange('resultAll','2')">不合格</el-checkbox>
                <span v-else>不合格</span>
              </td>
              <td colspan="2"></td>
            </tr>
            <tr v-for="(checkType,index) in report.checkTypeList" :key="'checkType_'+index">
              <td>{{checkType.projectName}}</td>
              <td>{{checkType.checkDesc}}</td>
              <td v-for="method in checkMethodList" :key="'method_'+method" :class="{'table-click':type==='add'}" @click="toChangeProperty(checkType,'checkMethod',method)">
                <span v-if="checkType.checkMethod===method">✔</span>
              </td>
              <td v-for="standard in samplingStandardList" :key="'standard_'+standard" :class="{'table-click':type==='add'}" @click="toChangeProperty(checkType,'samplingStandard',standard)">
                <span v-if="checkType.samplingStandard===standard">✔</span>
              </td>
              <td v-for="result in checkResultList" :key="'result_'+result" :class="{'table-click':type==='add'}" @click="toChangeProperty(checkType,'checkResult',result)">
                <span v-if="checkType.checkResult===result">✔</span>
              </td>
              <td colspan="2">
                <el-input v-if="type==='add'" v-model="checkType.remark" class="report-remark" type="textarea" :autosize="{minRows:1}" resize="none"></el-input>
                <div v-else style="text-align:left" v-html="getHtmlData(checkType.remark)"></div>
              </td>
            </tr>
            <tr>
              <td colspan="11" class="result-title">检验结论</td>
            </tr>
            <tr>
              <td rowspan="6">检验评语</td>
              <td rowspan="6" colspan="3" @click="evaluateClick">
                <el-input v-if="type==='add'" ref="evaluateDesc" v-model="report.evaluateDesc" class="report-remark" type="textarea" :autosize="{minRows:1}" resize="none"
                  @click.native.stop></el-input>
                <div v-else style="text-align:left" v-html="getHtmlData(report.evaluateDesc)"></div>
              </td>
              <td>结论</td>
              <td></td>
              <td colspan="2">良品数量</td>
              <td colspan="3">不良品数量</td>
            </tr>
            <tr>
              <td>整批接受</td>
              <td :class="{'table-click':type==='add'}" @click="setConclusion(1)">
                <span v-if="report.conclusion===1">✔</span>
              </td>
              <td rowspan="5" colspan="2">
                <el-input-number v-if="type==='add'" v-model="report.qualityCount" class="report-number" :min="0" :controls="false">
                </el-input-number>
                <span v-else>{{report.qualityCount}}</span>
              </td>
              <td rowspan="5" colspan="3">
                <el-input-number v-if="type==='add'" v-model="report.noQualityCount" class="report-number" :min="0" :controls="false">
                </el-input-number>
                <span v-else>{{report.noQualityCount}}</span>
              </td>
            </tr>
            <tr>
              <td>部分接受</td>
              <td :class="{'table-click':type==='add'}" @click="setConclusion(2)">
                <span v-if="report.conclusion===2">✔</span>
              </td>
            </tr>
            <tr>
              <td>特采整批接受</td>
              <td :class="{'table-click':type==='add'}" @click="setConclusion(3)">
                <span v-if="report.conclusion===3">✔</span>
              </td>
            </tr>
            <tr>
              <td>特采部分接受</td>
              <td :class="{'table-click':type==='add'}" @click="setConclusion(4)">
                <span v-if="report.conclusion===4">✔</span>
              </td>
            </tr>
            <tr>
              <td>不接受</td>
              <td :class="{'table-click':type==='add'}" @click="setConclusion(5)">
                <span v-if="report.conclusion===5">✔</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </template>
    </div>
  `;

  return {
    props: {
      type: {
        type: String,
        default: 'add'
      },
      material: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        report: null,
        checkMethodList: [1, 2, 3],
        samplingStandardList: [1, 2],
        checkResultList: [1, 2],
        methodAll: {
          "1": false,
          "2": false,
          "3": false
        },
        standardAll: {
          "1": false,
          "2": false
        },
        resultAll: {
          "1": false,
          "2": false
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setReport().then(function (report) {
        self.report = report;
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setReport: function () {
        if (this.type === 'add') {
          var material = this.material;
          return ajaxRequest('materialCheckType/getMaterialCheckType', {
            materialName: material.materialName
          }).then(function (materialCheckTypeList) {
            var report = new IqcReportModel('add', {
              material: material,
              materialCheckTypeList: materialCheckTypeList
            });
            return report;
          });
        }
        var reportMain = this.material;
        return ajaxRequest('materialCheckType/getDetailByCheckReportNo', {
          checkReportNo: reportMain.checkReportNo
        }).then(function (materialCheckTypeList) {
          var report = new IqcReportModel('approval', {
            reportMain: reportMain,
            materialCheckTypeList: materialCheckTypeList
          });
          return report;
        });
      },

      allCheckChange(property, value) {
        var checkAllMap = this[property];
        var checked = checkAllMap[value];
        var field = '';
        if (property === 'methodAll') {
          field = 'checkMethod';
        } else if (property === 'standardAll') {
          field = 'samplingStandard';
        } else if (property === 'resultAll') {
          field = 'checkResult';
        }
        var report = this.report;
        report.changeAllProperty(field, value);

        if (checked) {
          return;
        }
        checkAllMap[value] = true;
        for (const key in checkAllMap) {
          if (key !== value) {
            checkAllMap[key] = false;
          }
        }
      },

      toChangeProperty: function (checkType, property, value) {
        if (this.type !== 'add') {
          return;
        }
        checkType.changePropery(property, value);
      },

      evaluateClick: function () {
        if (this.type !== 'add') {
          return;
        }
        this.$refs['evaluateDesc'].focus();
      },

      setConclusion: function (value) {
        if (this.type !== 'add') {
          return;
        }
        this.report.conclusion = value;
      },

      submit: function () {
        var report = this.report;
        var code = report.checkValid();
        if (code !== '') {
          var msg = '';
          if (typeof code === 'string') {
            msg = i18n.getMsg(`iqc.iqcReport.error.${code}`);
          } else {
            if (code.length === 1) {
              msg = code[0];
            } else {
              msg = `项目名称为'${code[0]}',${i18n.getMsg(`iqc.iqcReport.error.${code[1]}`)}`;
            }
          }
          this.$alert(msg, '信息');
          return;
        }

        var postData = report.getObject();
        this.loading = true;
        var self = this;
        ajaxRequest('materialCheckType/setQcResult', postData).then(function () {
          self.loading = false;
          self.$emit('save-success');
        }).catch(function () {
          self.loading = false;
        });
      },

      toApproval: function (status) {
        var report = this.report;
        this.loading = true;
        var self = this;
        ajaxRequest('materialCheckType/approvalQcResult', {
          checkReportNo: report.checkReportNo,
          status: status
        }).then(function () {
          self.loading = false;
          var msg = status === 1 ? '该检验报告审核成功' : '该检验报告退回成功'
          self.$alert(msg, '信息', {
            callback: function () {
              self.$emit('approval-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      getHtmlData: function (data) {
        if (!data) {
          return '';
        }
        data = _.escape(data);
        data = data.replace(/ /g, '&nbsp;').replace(/\n/g, '<br>');
        return data;
      }
    },

    template: template
  };
}();
